今天被人说：页面加载太慢了…… |
您所在的位置：网站首页 › java web页面加载太慢了 › 今天被人说：页面加载太慢了…… |
今天被人说：页面加载太慢了……
|
这是我第一次遇到因为页面加载慢别人说的事…… 先说一下项目： 前后端不分离的项目，我开发都是用vs开发，页面扩展名都是.cshtml由于页面做的是增删改查，详情页面的内容很多，我选择了用vue引入vue.js和element js和css之后，详情的弹层部分通过iframe来展示 项目前后端不分离本地引入js css文件 使用vue window.onresize = function () { vm.tableHeight = document.documentElement.clientHeight - 240; } var vm = new Vue({ el: "#supplierPool", data() { return { tableHeight: document.documentElement.clientHeight - 240, fileInput: false, title: "查看详情", dialogFormVisible: false, dialogPersonVisible: false, id: null, …… } } }) 弹层部分这个地方的弹层，我开始用的layui，但是layui传递参数，如果是传递一个参数可以，传递多个的时候有点麻烦，主要是我不熟悉，不想用…… 网上查了很多资料，最终决定用iframe标签去渲染，弹层的打开和关闭都用elementUI中的dialog组件。 使用iframe标签做弹层的时候，主要的一个问题就是传参，最终决定用的传参方式是用一个span标签中的自定义属性传参。 子页面的接收如下： var id = $("#currentId", window.parent.document).data("id"); var state = $("#currentId", window.parent.document).data("state"); var isPool = $("#currentId", window.parent.document).data("pool"); var flag = $("#currentId", window.parent.document).data("flag");子页面关闭及调用父页面的方法如下： parent.closeIframe(); parent.refreshData();这个地方的refreshData是父页面的一个方法，这个方法一定要挂在到window上，因为parent是window.parent的缩写版。 此时就遇到一个问题：如何将vue中的方法挂载到window上…… 哎，真是一个坑接一个坑…… 解决方法： 在vue的methods方法中定义refreshData函数在mounted中写以下代码： mounted() { var me = this; window.closeIframe = me.closeDialog;//关闭弹层，如果用dialog，关闭最好还是在当前的页面 window.refreshData = me.refreshData;//详情修改后更新列表，也是要触发列表页面的刷新方法 } 页面加载慢在本地运行的时候，其实还好，但是发布到线上之后，巨慢，慢到10s左右才出来详情页面 在排查页面加载慢的过程中，用到了之前没有用过的东西，感觉自己的知识积累好少，换句话，潜力无穷…… 控制台的performance
页面加载缓慢也可能是接口的问题，这一块怎么排查哪？ 有同事跟我说：在接口开始调用时，定义一个定时器，接口调通后，结束计时。这样就能看到时间了…… 其实有个简单的方法： console.time(“命名”);console.timeEnd(“命名”); 控制台的打印情况：  经过排查，接口调通的时间只有300ms左右，排除接口的问题；
会不会是数据处理的问题：我拿到后台返回的数据后，要进行转化才变成我想要的，这个也用上面的时间处理方式进行了打印，打印结果就是上图中的"chuli"：只有2ms左右，排除是我数据处理的问题。 由于用到的是vue，获取到数据后，就vue自行渲染了，还能是哪里的问题？？？ 将script引入的文件变成异步vue本身就是异步的，所以渲染很快，但是我在当前页面body的上面引入了vue.js element-ui.js element-ui.css文件，有朋友建议让我把文件的引入改为异步，因为js是解释型语言，执行会从上到下依次进行。改为异步，可以不阻塞页面。 script文件改为异步的方式：加个async就可以了…… 结果在页面加载的时候，如果vue.js文件加载的慢一点，就会出现下面的尴尬情况： 排除了上面的问题后，朋友跟我说单独打开这个页面挺快的，我说：怎么单独打开的…………？？？？？ 线上的项目实现单独打开某个页面控制台中有个sources，然后在这个左侧的结构中找到对应的文件，然后右击“open in new tab”，既可以打开 最后把问题定位到iframe上，因为我详情页面的弹层是通过iframe标签进行渲染的，排除详情页面的各种问题后，只能把问题放在弹层出现的方式上。。 如果iframe标签加载过慢的话，可以考虑用a标签，或者layui中的layer.open… 我还没有来得及改给a标签的渲染方式，后端同事说页面加载变快了，，，， 所以直到现在，我还不知道为什么页面变快了…… 如果有大神知道，可以告诉我，，，谢谢！！！！ |
用法是很简单的，如果你想看哪个页面的加载情况，就点击监听（黑点）或者紧挨着的刷新按钮，监听小点会变红色，然后你去触发页面的渲染，页面加载完成后，点击stop，就可以看到这段时间内容的加载情况了……
问题：
打开之后发现，页面加载还可以，至少没有慢到10s，所以排除整个页面的问题。。。【本文地址】
今日新闻 |
推荐新闻 |